<template>
  <div>
    <div class="section">
      <!-- 头部 -->
      <van-row type="flex" class="heads">
        <van-col span="18"> 个人中心</van-col>
        <van-col span="2" offset="2">
          <van-icon
            name="setting-o"
            color="white"
            @click="gosetting"
            class="links"
        /></van-col>
        <van-col span="2"> <van-icon name="chat-o" color="white" /></van-col>
      </van-row>

      <!-- 浮动框 -->
      <van-row class="floats">
        <van-col span="20" offset="2" class="floats_u" type="flex">
          <!-- 内容 -->
          <van-row>
            <van-col span="6" offset="1">
              <van-image
                round
                width="45px"
                height="45px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
            /></van-col>
            <van-col span="8">
              <span> 水果项目 </span><br />
              <span class="littlesize">商店名：黑店</span>
            </van-col>
          </van-row>
          <van-row class="littlesize">
            <van-col span="6" offset="1">
              <span>收藏的商品</span>
              <br />
              <span>999</span>
            </van-col>
            <van-col span="10">
              <span>关注的商家</span>
              <br />
              <span>999</span>
            </van-col>
            <van-col span="7">
              <span>浏览记录</span>
              <br />
              <span>999</span>
            </van-col>
          </van-row>
        </van-col>
      </van-row>

      <!-- 全部订单 -->

      <van-row class="allorder">
        <van-cell value="查看更多订单" is-link to="/allorder">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">全部订单</span>
          </template>
        </van-cell>
      </van-row>

      <!-- 九宫格 -->
      <van-row>
        <van-grid :border="false" :column-num="4">
          <van-grid-item
            v-for="(item, i) in orders"
            :key="i"
            :icon="item.icon"
            :text="item.text"
            :to="item.url"
          >
          </van-grid-item>
        </van-grid>
      </van-row>
      <!-- 优惠券等等 -->
      <van-cell is-link title="我的优惠券" to="/coupon" />
      <van-cell is-link title="我收藏的商品" to="/collect" />
      <van-cell is-link title="我关注的商铺" to="/follow" />
      <van-cell is-link title="浏览记录" to="/bshistory" />
      <van-cell is-link title="收货地址管理" to="/addree" />
      <van-cell />
    </div>
    <!-- 组件 -->
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
import TabBar from "../../components/tabbar/TabBar";
import TabBarItem from "../../components/tabbar/TabBarItem";
import mainTabBar from "../../components/mainTabBar.vue";

export default {
  name: "profile",
  data() {
    return {
      property: "value",
      orders: [
        {
          id: 1,
          icon: require("/src/assets/img/profile/dengdaiqueren.png"),
          text: "待卖家确认",
          url: "/",
        },
        {
          id: 2,
          icon: require("/src/assets/img/profile/daizhifu.png"),
          text: "待支付",
          url: "/cart",
        },
        {
          id: 3,
          icon: require("/src/assets/img/profile/daifahuo.png"),
          text: "待发货",
        },
        {
          id: 4,
          icon: require("/src/assets/img/profile/daishouhuo.png"),
          text: "待收货",
        },
        {
          id: 5,
          icon: require("/src/assets/img/profile/daizitidingdan.png"),
          text: "自提订单",
        },
        {
          id: 6,
          icon: require("/src/assets/img/profile/31daipingjia.png"),
          text: "待评价",
        },
        {
          id: 7,
          icon: require("/src/assets/img/profile/yiquxiao.png"),
          text: "已取消",
        },
        {
          id: 8,
          icon: require("/src/assets/img/profile/tuihuo.png"),
          text: "退货订单",
        },
      ],
    };
  },

  methods: {
    gosetting() {
      this.$router.push({
        path: "/setting",
        // params: { userId: this.num },
      });
    },
  },
  components: {
    TabBar,
    TabBarItem,
    mainTabBar,
  },
};
</script>

<style scoped>
@import "../../assets/css/base.css";
.section{
  margin-bottom: 50px;
}
.heads {
  font-size: 1.125rem;
  color: white;
  background-color: #4bd863;
  height: 90px;
  padding: 0.9375rem 0.1875rem 0rem 0.625rem;
}
.floats {
  position: relative;
  top: -30px;
  height: 6.25rem;
}
.floats_u {
  background-color: rgb(247, 245, 247);
  height: 6.25rem;
  padding: 6px;
  box-shadow: 0.1875rem 0.1875rem 0.1875rem #888888;
}
.floats_u[data-v-7a29ce99]{
  border-radius: 5px;
}
.littlesize {
  font-size: 0.75rem;
  font-weight: lighter;
  text-align: center;
  margin-top: 0.3125rem;
}
/* .allorder {
  border: rgb(214, 210, 210) solid 0.0625rem;
  box-sizing: border-box;
  padding: 0.125rem 0rem 0.125rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
} */
.links {
  cursor: pointer;
}
</style>
